<!--
 * @description: 
 * @Date: 2022-10-08 14:26:01
 * @LastEditTime: 2022-12-04 18:35:17
-->
<template>
  <div
    class="item filter row-span-1 col-span-1"
    :class="store.state.editStatus ? 'edits' : ''"
  >
    <div
      class="itemBox hover"
      @click="redirectUrl(item?.url)"
      @contextmenu.prevent="menu($event, item)"
      v-animate="'bounceIn'"
    >
      <img
        v-if="store.state.editStatus"
        @click.stop="del(item, $event)"
        class="del-footer"
        src="@/assets/svg/close.svg"
      />
      <img class="icon" :src="item?.src" />
      <div class="iconName">{{ item?.name }}</div>
    </div>
  </div>
</template>
<script setup>
import redirectUrl from "../util/href";
import { useAttrs, ref } from "vue";
import { useStore } from "vuex";
import $ from "jquery";
import emitter from "../util/emitter";
const { data } = useAttrs();
const store = useStore();
const item = ref(data);
const del = (item, event) => {
  $(event.target).parent().parent().remove();
  store.commit("delLink", item.id);
};
const menu = (event, info) => {
  const { button, clientX, clientY } = event;
  if (button === 2) {
    emitter.emit("mousePs", {
      left: clientX,
      top: clientY,
      data: info,
      call: function () {
        $(event.target).parent().remove();
      },
    });
  }
  event.stopPropagation();
};
</script>
<style lang="less">
.item {
  display: flex;
  justify-content: center;
  > .itemBox {
    width: 100%;
    height: 80px;
    transition: all 0.3s;
    .del-footer {
      position: absolute;
      right: -8px;
      top: -8px;
      width: 16px;
      height: 16px;
      background: rgba(212, 212, 212, 0.651);
      cursor: pointer;
      z-index: 10;
      border-radius: 20px;
    }

    > .icon {
      margin: auto;
      box-shadow: 0 0 5px #0000002c;
      object-fit: cover;
      object-position: center;
      width: 60px;
      height: 60px;
      pointer-events: none;
      display: block;
      background-color: rgb(255, 255, 255);
      border-radius: var(--iconRadius);
    }

    > div {
      width: calc(100% + 20px);
      transform: translateX(-10px);
      margin-top: 6px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: #fff;
      font-size: 12px;
      text-align: center;
      // filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
    }
  }
}
</style>
